<template>
  <div class="page-container">
    <page-filter-component @filter-form-submit="fetchTableData">
      <template v-slot:header-opt>
        <el-button size="small" type="primary" @click="toCustomerDetail('ADD')">
          新增客户
        </el-button>
      </template>
      <template v-slot:body>
        <el-form-item label="客户名称">
          <el-input v-model="filterForm.client_name" clearable />
        </el-form-item>
      </template>
    </page-filter-component>

    <el-card class="table-card">
      <el-tabs v-model="filterForm.parentId">
        <el-tab-pane
          v-for="(category, index) in customerCategories"
          :key="`category-tab-${index}`"
          :label="category.type_name"
          :name="category.type_id + ''"
        ></el-tab-pane>
      </el-tabs>

      <div class="table-container">
        <el-table
          size="mini"
          stripe
          :data="tableData.list"
          class="el-table--scrollable-y"
          v-loading="tableDataLoading"
          element-loading-text="数据加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
        >
          <el-table-column label="ID" prop="client_id"></el-table-column>
          <el-table-column
            label="客户姓名"
            prop="client_name"
          ></el-table-column>
          <el-table-column label="证件号" prop="IDcard"></el-table-column>
          <el-table-column
            label="社保所在地"
            prop="ss_location"
          ></el-table-column>
          <el-table-column label="社保是否可转" prop="ss_moveable">
            <template slot-scope="{ row }">
              <el-tag type="success" size="mini" v-if="row.ss_moveable == 1">
                可转
              </el-tag>
              <el-tag type="danger" size="mini" v-else>不可转</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="资格证专业"
            prop="type_name"
          ></el-table-column>
          <el-table-column label="备注" prop="note"></el-table-column>
          <el-table-column label="审核状态" prop="status">
            <template slot-scope="{ row }">
              <a-approval-status-tag :status="row.status" size="mini"/>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="{ row }">
              <el-button
                type="text"
                size="mini"
                icon="el-icon-view"
                @click="toCustomerDetail('EDIT', row.client_id)"
              >
                编辑
              </el-button>
              <el-button
                icon="el-icon-download"
                type="text"
                size="mini"
                @click="onDownloadAllAttachment(row.client_id)"
              >
                一键下载附件
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="table-pagination">
        <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="tableData.page"
          :page-size="tableData.pageSize"
          :total="tableData.total"
          @current-change="onPageChanged"
          @size-change="onPageSizeChanged"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>
<script>
import index from './index.js';

export default index;
</script>

<style scoped lang="less">
@import './index.less';
</style>
